<script setup lang="ts">
import { reactive, ref, watch, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
  getArticleDetail,
  getPrevArticle,
  getNextArticle,
} from "@/network/api";
import router from "@/router";
import { ElMessage } from "element-plus";
import "element-plus/es/components/message/style/css";
import { getCurrentInstance } from "vue";
const dayjs = getCurrentInstance()?.appContext.config.globalProperties.$dayjs;

let data = reactive({
  id: useRoute().query.id,
  detail: {} as any,
});

const handleGetArticleDetailData = () => {
  getArticleDetail({ article_id: data.id }).then((res) => {
    const timeZone = ref(0)
    timeZone.value = -new Date().getTimezoneOffset() / 60
    res.data.timeZone = res.data?.publish_time - (8 - (timeZone.value)) * 3600
    const year = dayjs(res.data.timeZone * 1000).year()
    const month = dayjs(res.data.timeZone * 1000).month() + 1
    const day = dayjs(res.data.timeZone * 1000).date()
    res.data.newsDate = `${year}-${month}-${day}`
    data.detail = res.data;
  });
}

const Route = useRoute()

watch(() => Route.query, (newValue) => {
  data.id = newValue.id
  data.detail = {}
  handleGetArticleDetailData()
})


const Previous = () => {
  getPrevArticle({
    article_id: data.id,
    article_category_alias: data.detail.article_category_alias
  }).then((res) => {
    if (res.data) {
      router.push({
        path: `/NewsDetail`,
        query: {
          id: res.data.id,
        },
      });
    } else {
      ElMessage({
        message: "没有更多",
        type: "warning",
      });
    }
  });
};

const Next = () => {
  getNextArticle({
    article_id: data.id,
    article_category_alias: data.detail.article_category_alias
  }).then((res) => {
    if (res.data) {
      router.push({
        path: `/NewsDetail`,
        query: {
          id: res.data.id,
        },
      });
    } else {
      ElMessage({
        message: "没有更多",
        type: "warning",
      });
    }
  });
};

const LearnDatas = (id: number) => {
      router.push({
        path: `/NewsDetail`,
        query: {
          id: id,
        },
      });
    };

onMounted(() => {
  handleGetArticleDetailData()
})
</script>
  
<template>
  <div class="content">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <div class="contentText">首页</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/News' }">
          <div class="contentText">最新动态</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="contentText">{{ data.detail.title }}</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row class="news" justify="space-between">
      <el-col :span="16" :xs="24" class="newsContent">
        <div class="secondTitle">{{ data.detail.title }}</div>
        <div class="newsDate" v-if="data.detail.newsDate">{{ data.detail.newsDate }}</div>
        <div class="newsText contentText">
          <div v-html="data.detail.content"></div>
        </div>
        <div class="newsBtn">
          <div class="newsBtnReturn">
            <el-icon size="18px">
              <ArrowLeft />
            </el-icon>
            <span class="tabsText" @click="Previous">上一篇</span>
          </div>
          <div class="newsBtnNext">
            <span class="tabsText" @click="Next">下一篇</span>
            <el-icon size="18px">
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </el-col>
      <el-col :span="7" :xs="24" class="other_news">
        <!-- <div class="bigTitle">其他新闻</div> -->
        <div class="eventsitem" v-for="other in data.detail.other" :key="other.id">
          <div class="imgs_b">
            <img
              :src="other.cover_image"
              alt="" />
          </div>
          <div class="item_b">
            <div class="time auxiliaryText">{{ other.publish_time }}</div>
            <div class="text contentText">
              {{ other.title }}
            </div>
            <el-button color="#064DD6" size="large" round @click="LearnDatas(other.id)">马上查看</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
  
<style lang="scss" scoped>
@import url("@/assets/css/content.css");

.tabsText {
  cursor: pointer;
}

.content {
  margin: 0 auto;

  .breadcrumb {
    border-bottom: 2px solid $auxiliaryColor3;
    padding: 20px 0;
    .contentText {
      font-size: 16px;
    }
  }

  .news {
    width: 100%;
    // padding-left: 40px;
    margin-top: 40px;
    padding-bottom: 40px;
    margin-left: 0px !important;

    .newsContent {
      padding: 34px;
      background-color: #fff;
      border-radius: 10px;

      .newsTitle {
        font-size: $secondTitle;
        font-weight: bold;
        color: $auxiliaryColor;
      }

      .newsDate {
        font-size: $auxiliary;
        color: $mainColor;
        margin: 20px 0;
      }

      .newsImage {
        img {
          width: 80%;
          height: 100%;
          object-fit: cover;
          border-radius: 20px;
        }
      }

      .newsText {
        // font-size: $text;
        margin-top: 40px;
        color: $auxiliaryColor;
        line-height: $lineHegiht;

        :deep(img) {
          width: 100% !important;
          height: 100% !important;
          object-fit: contain;
        }

        :deep(p) {
          line-height: 1.5 !important;
        }

        :deep(p span) {
          font-family: alibabapuhuitiRegular !important;
          font-size: 16px !important;
        }
      }

      .newsBtn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 60px 0 40px 0;

        .el-icon {
          margin: 0 10px;
        }

        .newsBtnReturn {
          display: flex;
          align-items: center;
        }

        .newsBtnNext {
          display: flex;
          align-items: center;
          cursor: pointer;
        }
      }
    }

    .other_news {
      width: 100%;

      .eventsitem {
        padding: 20px;
        background: #fff;
        margin-bottom: 30px;
        border-radius: 10px;

        .item_b {
          .time {
            margin: 10px 0;
          }

          .text {
            color: $auxiliaryColor;
            margin-bottom: 20px;
          }

          .el_bun {
            border: 0px;
          }
        }
      }

      img {
        width: 100%;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .news {
    padding-left: 0 !important;
  }

  .breadcrumb {
    padding: 0 0 10px 0 !important;

    :deep(.el-breadcrumb) {
      line-height: 1.5;
    }
  }

  .content .news {
    margin-top: 20px;
  }

  .content {
    // padding: 20px !important;

    .newsContent {
      padding: 20px !important;
    }
  }

  .other_news{
    margin-top: 30px;
  }
}
</style>